<template>
  <div class="form-base" style="height: 100%">
    <je-form
      :model="formState"
      :colon="false"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      autocomplete="off"
      size="small"
    >
      <!-- <je-button @click="doSave">保存</je-button> -->
      <je-collapse v-model:activeKey="activeKey" expand-icon-position="right">
        <je-collapse-panel key="1" :header="$t('formBase.baseConfiguration')">
          <BaseConfiguration
            ref="baseObj"
            :wf-id="jebpmData.properties.process_id"
            :process-basic-config="jebpmData.properties.processBasicConfig"
          />
        </je-collapse-panel>
        <!-- <je-collapse-panel key="2" header="APP绑定">
          <AppBinding />
        </je-collapse-panel> -->
        <je-collapse-panel key="3" :header="$t('formBase.startConfiguration')">
          <StartConfiguration
            :wf-id="jebpmData.properties.process_id"
            :startup-settings="jebpmData.properties.startupSettings"
            :work-flow-info="jebpmData.properties.processBasicConfig"
          />
        </je-collapse-panel>
        <je-collapse-panel key="4" :header="$t('formBase.extendConfiguration')">
          <ExtendConfiguration
            :wf-id="jebpmData.properties.process_id"
            :extended-configuration="jebpmData.properties.extendedConfiguration"
          />
        </je-collapse-panel>
        <je-collapse-panel key="5" class="event-panel" :header="$t('formBase.eventConfiguration')">
          <EventConfiguration
            v-model:customEventListeners="customEventListeners"
            type="base"
            :work-flow-info="jebpmData.properties.processBasicConfig"
          />
        </je-collapse-panel>
        <je-collapse-panel key="6" :header="$t('formBase.informRemind')" class="event-panel">
          <InformRemind
            :wf-id="jebpmData.properties.process_id"
            :message-setting="jebpmData.properties.messageSetting"
          />
        </je-collapse-panel>
        <je-collapse-panel key="7" :header="$t('formBase.buttonConfiguration')" class="event-panel">
          <ButtonConfiguration
            ref="buttonConfigurationRef"
            :process-button-config="processButtonConfig"
            :func-info="jebpmData.properties.processBasicConfig"
            type-data="base"
            @setButtonConfig="setButtonConfig"
          />
        </je-collapse-panel>
      </je-collapse>
    </je-form>
  </div>
</template>

<script>
  import { defineComponent, ref, watch } from 'vue';
  import { Collapse, Form, Hooks } from '@jecloud/ui';
  import BaseConfiguration from './components/base-configuration.vue';
  import StartConfiguration from './components/start-configuration.vue';
  import ExtendConfiguration from './components/extend-configuration.vue';
  import EventConfiguration from '@/components/event-configuration/index.vue';
  import InformRemind from './components/inform-remind.vue';
  import ButtonConfiguration from '@/components/button-configuration/index.vue';

  export default defineComponent({
    name: 'FormBase',
    components: {
      JeCollapse: Collapse,
      JeCollapsePanel: Collapse.Panel,
      JeForm: Form,
      BaseConfiguration,
      StartConfiguration,
      ExtendConfiguration,
      EventConfiguration,
      InformRemind,
      ButtonConfiguration,
    },
    props: {
      jebpmData: {
        type: Object,
        default: () => {
          return {};
        },
      },
      wfEditor: {
        type: Object,
        default: () => {
          return {};
        },
      },
      refreshGridData: {
        type: Boolean,
      },
    },
    setup(props, context) {
      const baseObj = ref();
      //表单数据
      const jebpmObj = ref(props.jebpmData);
      const formState = ref(jebpmObj.value.properties.processBasicConfig);
      const customEventListeners = ref(jebpmObj.value.properties.customEventListeners);
      const processButtonConfig = ref(jebpmObj.value.properties.processButtonConfig);

      //监听loadForm数据刷洗主表单数据
      watch(
        () => props.jebpmData.properties.process_id,
        () => {
          jebpmObj.value = props.jebpmData;
          formState.value = props.jebpmData.properties.processBasicConfig;
          customEventListeners.value = props.jebpmData.properties.customEventListeners;
          processButtonConfig.value = props.jebpmData.properties.processButtonConfig;
        },
        { deep: true },
      );

      //监听全局事件列表的数据
      watch(
        () => customEventListeners.value,
        (newVal) => {
          //给主数据从新赋值
          jebpmObj.value.properties.customEventListeners = newVal;
        },
      );
      /*  watch(
        () => processButtonConfig.value,
        (newVal) => {
          debugger;
          //给主数据从新赋值
          jebpmObj.value.properties.processButtonConfig = newVal;
        },
      ); */
      const setButtonConfig = (data) => {
        jebpmObj.value.properties.processButtonConfig = data;
      };
      //默认激活的面板
      const activeKey = ref(['1', '2', '3', '4', '5', '6', '7']);

      const buttonConfigurationRef = ref();
      watch(
        () => props.refreshGridData,
        () => {
          buttonConfigurationRef.value.gridStore.loadData(
            jebpmObj.value.properties.processButtonConfig,
          );
        },
      );
      //保存方法
      const doSave = () => {
        baseObj.value
          .validate()
          .then(() => {
            return true;
          })
          .catch((error) => {
            // alert('验证失败');
            return false;
          });
      };
      return {
        activeKey,
        formState,
        doSave,
        baseObj,
        customEventListeners,
        labelCol: {
          span: 5,
        },
        wrapperCol: {
          span: 19,
        },
        jebpmObj,
        processButtonConfig,
        setButtonConfig,
        buttonConfigurationRef,
      };
    },
  });
</script>

<style lang="less" scoped>
  .form-base {
  }
</style>
<style lang="less">
  .form-base {
    .event-panel {
      .ant-collapse-content > .ant-collapse-content-box {
        padding: 0px;
      }
    }
  }
</style>
